<template>
  <div class="main" span="24">
    
       <div class="head"><img src="../../../static/images/banner1.jpg"></div>
     <div class="weui-cells__title">用户登录</div>
     <div class="weui-cells weui-cells_form">
       <div class="weui-cell">
         <div class="weui-cell__hd">
        <label class="weui-label">用户名</label>
       </div>
      <div class="weui-cell__bd">
      <input class="weui-input" placeholder="用户名只能为英文、数字、下划线，并且必须包含字母，长度为6到18位" v-model="userinfo.username"> 
      </div>
      </div> 
      <div class="weui-cell">
         <div class="weui-cell__hd">
        <label class="weui-label">手机号</label>
       </div>
      <div class="weui-cell__bd">
        <input class="weui-input" type="tel" placeholder="请输入手机号" v-model="userinfo.telphone">
      </div>
      <div class="weui-cell__ft">
        <button class="weui-vcode-btn" @click="getcode" :disabled="sendsuccess">{{vcode}}</button>
      </div>
      </div>
        <div class="weui-cell">
         <div class="weui-cell__hd">
        <label class="weui-label">验证码</label>
       </div>
      <div class="weui-cell__bd">
      <input class="weui-input" placeholder="请输入验证码" v-model="userinfo.verification"> 
      </div>
      </div> 
       <div class="weui-cell">
         <div class="weui-cell__hd">
        <label class="weui-label">公司名称</label>
       </div>
      <div class="weui-cell__bd">
      <input class="weui-input" placeholder="请输入公司名称"  v-model="userinfo.companyname">
      </div>
      </div> 
       <div class="weui-cell">
         <div class="weui-cell__hd">
        <label class="weui-label">密码</label>
       </div>
      <div class="weui-cell__bd">
      <input class="weui-input" placeholder="密码长度8~16位，必须包含数字、字母、字符" v-model="userinfo.password"> 
      </div>
      </div> 
       <div class="weui-cell">
         <div class="weui-cell__hd">
        <label class="weui-label">确认密码</label>
       </div>
      <div class="weui-cell__bd">
      <input class="weui-input" placeholder="密码长度8~16位，必须包含数字、字母、字符" v-model="userinfo.passwordagain"> 
      </div>
      </div> 
       <div class="weui-cell">
        <p class="footer">注册即视为同意<span style="color:#408BD8" @click="handleclick()">《中国联通政企电商平台服务条款》</span></p>
       </div> 
        <i-button type="success" shape="circle" @click="submit_register">提交注册</i-button>
   </div>
   <!-- <i-button type="ghost" @click="handleSuccess">成功</i-button>
   <i-toast id="toast" /> -->
 </div>    
</template>

<script>
import card from '@/components/card'
import 'mpvue-weui/src/style/weui.css';
import mpSearchbar from 'mpvue-weui/src/searchbar'
//import  {APPID} from '../../utils/http'
import {postRequest} from '@/utils/http'




export default {
  data () {
    return {
      motto: 'Hello miniprograme',
      UNI_BSS_HEAD:'',
      userInfo: {
        nickName: 'mpvue',
        avatarUrl: 'http://mpvue.com/assets/logo.png'
      },
      vcode:"获取验证码",
      sendsuccess : false,
       totalTime: 60,
        IP:'',
      userinfo:{
        username: "",
        telphone: "",
        verification:'',
        companyname:"",
        password:"",
        passwordagain:""
      },
     
      imageArray:[
        {"index":1,"url":"http://mpvue.com/assets/logo.png","name":"引导认证"},
        {"index":2,"url":"http://mpvue.com/assets/logo.png","name":"引导认证"},
        {"index":3,"url":"http://mpvue.com/assets/logo.png","name":"引导认证"}
      ]
    }
  },

  components: {
    card,
    mpSearchbar
  },

  methods: {
     handleSuccess () {
        $Toast({
            content: '成功的提示',
            type: 'success'
        });
    },  
    handleclick(){
       wx.navigateTo(
          {
            url: '../agreement/main'
          })
    },
    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    },
    clickHandle (ev) {
      console.log('clickHandle:', ev)
      // throw {message: 'custom test'}
    },
     async submit_register() {
     if (
        this.userinfo.username == "" ||
        this.userinfo.password == "" ||
        this.userinfo.verification == "" ||
        this.userinfo.telphone == "" ||
        this.userinfo.companyname == ""
      ) {
        console.log(this.userinfo);
        wx.showToast({
          title: "内容有空值，请重新填写", //标题
          icon: "none"
        });
        return;
      }
         if(this.userinfo.password != this.userinfo.passwordagain){
          wx.showToast({
          title: "两次输入密码不一致，请核对", //标题
          icon: "none"
        });
         return;
       }
      let params ={
          'UNIFIED_ACCT_NUMBER':this.userinfo.username,
          'PASS_WORD':this.userinfo.password,
           'IS_PH':'1',
           'CAPTCHA_CODE':this.userinfo.verification,
           'PHONE':this.userinfo.telphone,
           'COMPANY_NAME':this.userinfo.companyname,
           'FROM_CHANNEL':"BJWeChatZ8",
           'IP':this.IP,
          };
     // const info = await postRequest('/sendSMSCaptchaCode/v0',params);
      const info = await postRequest('/register/v0',params);
      const result = info.UNI_BSS_BODY;
      console.log(result);
      if(result.RSP.CODE == "0000"){
         wx.setStorage({
              key: 'info',
              data: info,
            })
            const infomation = wx.getStorageInfoSync('info');
            
            console.log(infomation);

          wx.navigateTo(
          {
            url: '../homepage/main'
          })
      }
      else{
        console.log(result.RSP.MESSAGE);
         wx.showToast({
          title: result.RSP.MESSAGE, //标题
          icon: "none"
        });
      }

  },
   async  getcode() {
        let params ={
                'PHONE':this.userinfo.telphone,
                'TYPE':'4' 
      };
      const info =  await postRequest('/sendSMSCaptchaCode/v0',params);
      const result = info.UNI_BSS_BODY;
      console.log(result);
       if(result.RSP.CODE == '0000'){
      
         setInterval(()=>{
           this.sendsuccess = true ;
         this.totalTime --;
         this.vcode =  this.totalTime + 's后重新发送';
      if(this.totalTime == 0){
       this.totalTime = 60;
        this.sendsuccess = false ;
       return 
       }
   },1000)

   }
   else{
     consloe.log(result.RSP.MESSAGE)
   }
  }

  },
  created () {
    // let app = getApp()
  },
  onLoad:function(options){
     let that = this;
     that.infomation = wx.getStorageSync('info');//获取登录接口返回信息
     console.log(that.infomation);
    wx.request({
     url: 'https://tianqiapi.com/ip/',
     data: {
     },
     method: 'POST',
     header: {
    'content-type': 'application/x-www-form-urlencoded'
     },
     success: function (res) {
      console.log('IP地址: ' + res.data.ip);
      that.IP = res.data.ip;
     }
    });
   }
}
</script>

<style lang="scss" scoped>
  .main{
    font-size: 20px;
        background-color: #ededed;
    p{
      font-size: 30px;
    }
  }
  .info-box{
    border:1px solid #000;
    border-radius: 8px;
    margin:10px 10px 30px 10px ;
    padding:10px;
  }
  .line{
    line-height:3em;

  }
  .title{
    position:relative;
    top:1.2em;
    left:1em;
    font-size:20px !important;;
    width:4.5em;
    background-color:#fff;
  }
  .weui-label{
    display: block;
    width: 6.5em;
    word-wrap: break-word;
    word-break: break-all;
  }
   .head {
  img {
    width: 100%;
    height: 100px;
  }
  }
   .footer{
    display: inline-block;
    font-size:15px !important;
    color:#5D657F;
}
 
</style>
